<script setup>
import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import { getHelper } from '@/utils/map/index.js'
import spjk from '../../../../assets/imgs/ic_spjk_device.png'
import dzwl from '../../../../assets/imgs/ic_dzwl_device.png'
import rymj from '../../../../assets/imgs/ic_rymj_device.png'
import wrdz from '../../../../assets/imgs/ic_wrdz_device.png'
import { getEquipmentTotal } from '@/api/screen/home/index'
import { useDict } from '@/hooks/useDict'
import { getTaskList } from '@/api/manager/inspectionManage/taskManage.js'
import { ElMessage } from 'element-plus'
import { fetchCameraDeviceList } from '@/api/manager/dataManage/deviceManage.js'

let measure, _viewer, _layerManager

const mapId = inject('mapId')

const { dict, getDictValue } = useDict([
  'device_type',
  'inspection_inspection_type',
  'task_status',
])

const props = defineProps({
  isExpanded: Boolean,
  activePark: String,
})
let dateValue = ref('')
let dateSelect = ref('0')
let tabValue = ref('1')
let deviceSelect = ref('0')

const deviceList = ref([
  {
    img: spjk,
    name: '视频监控',
    online: 100,
    offline: 4,
    total: 104,
    check: false,
    entities: [],
  },
  {
    img: dzwl,
    name: '电子围栏',
    online: 100,
    offline: 4,
    total: 104,
    check: false,
    entities: [],
  },
  {
    img: rymj,
    name: '人员门禁',
    online: 100,
    offline: 4,
    total: 104,
    check: false,
    entities: [],
  },
  {
    img: wrdz,
    name: '无人道闸',
    online: 100,
    offline: 4,
    total: 104,
    check: false,
    entities: [],
  },
  {
    img: spjk,
    name: '视频监控',
    online: 100,
    offline: 4,
    total: 104,
    check: false,
    entities: [],
  },
  {
    img: dzwl,
    name: '电子围栏',
    online: 100,
    offline: 4,
    total: 104,
    check: false,
    entities: [],
  },
])

const deviceType = ref([
  {
    img: rymj,
    name: '报警设备',
    value: 'bjsb',
  },
  {
    img: dzwl,
    name: 'GNSS监测一体机',
    value: 'gnss',
  },
  {
    img: rymj,
    name: '监测设备',
    value: 'jcsb',
  },
  {
    img: dzwl,
    name: '门磁人脸识别机',
    value: 'mcrl',
  },
  {
    img: wrdz,
    name: 'NVR',
    value: 'nvr',
  },
  {
    img: spjk,
    name: '摄像机',
    value: 'sxj',
  },
  {
    img: dzwl,
    name: '行车道闸',
    value: 'xcdz',
  },
  {
    img: spjk,
    name: '翼闸人脸识别机',
    value: 'yzrl',
  },
])

const deviceTable = ref([
  {
    name: '摄像头1',
    type: '周界摄像头',
    address: '凤栖路8号',
    online: 1,
  },
  {
    name: '摄像头1',
    type: '周界摄像头',
    address: '凤栖路8号',
    online: 0,
  },
  {
    name: '摄像头1',
    type: '周界摄像头',
    address: '凤栖路8号',
    online: 1,
  },
  {
    name: '摄像头1',
    type: '周界摄像头',
    address: '凤栖路8号',
    online: 0,
  },
  {
    name: '摄像头1',
    type: '周界摄像头',
    address: '凤栖路8号',
    online: 0,
  },
  {
    name: '摄像头1',
    type: '周界摄像头',
    address: '凤栖路8号',
    online: 1,
  },
  {
    name: '摄像头1',
    type: '周界摄像头',
    address: '凤栖路8号',
    online: 0,
  },
  {
    name: '摄像头1',
    type: '周界摄像头',
    address: '凤栖路8号',
    online: 1,
  },
  {
    name: '摄像头1',
    type: '周界摄像头',
    address: '凤栖路8号',
    online: 0,
  },
  {
    name: '摄像头1',
    type: '周界摄像头',
    address: '凤栖路8号',
    online: 0,
  },
  {
    name: '摄像头1',
    type: '周界摄像头',
    address: '凤栖路8号',
    online: 1,
  },
  {
    name: '摄像头1',
    type: '周界摄像头',
    address: '凤栖路8号',
    online: 0,
  },
  {
    name: '摄像头1',
    type: '周界摄像头',
    address: '凤栖路8号',
    online: 1,
  },
  {
    name: '摄像头1',
    type: '周界摄像头',
    address: '凤栖路8号',
    online: 0,
  },
  {
    name: '摄像头1',
    type: '周界摄像头',
    address: '凤栖路8号',
    online: 0,
  },
])

const alarmPoint = ref([
  {
    id: '10012',
    status: 'online',
    img: 'img/dwd_yiji.png',
    position: [106.50167889877305, 29.794468517068004],
  },
  {
    id: '10013',
    status: 'warning',
    img: 'img/dwd_erji.png',
    position: [106.50439352843237, 29.794252598871808],
  },
])

const detectorInfo = ref({
  name: '',
  time: '',
  status: '',
  type: '',
})

const getDetectorInfoData = () => {
  getTaskList({
    areaId: props.activePark,
    typeId: dateSelect.value,
    pageSize: 1,
  }).then((res) => {
    if (res.success) {
      const data = res.data?.list[0] || {}
      // console.log(data)
      detectorInfo.value = {
        name: data.name,
        time:
          data.beginTime && data.endTime
            ? data.beginTime + '-' + data.endTime
            : '',
        status: getDictValue('task_status', data.status),
        type: getDictValue('inspection_inspection_type', data.typeId),
      }
    } else {
      ElMessage.error(res.message)
    }
  })
}

const getDeviceTableData = () => {
  fetchCameraDeviceList({
    parkId: props.activePark,
    pageSize: 20,
  }).then((res) => {
    if (res.success) {
      // console.log(res.data)
      deviceTable.value =
        res.data?.list?.map((item) => {
          return {
            name: item.nickName,
            type: '摄像头',
            model: item.model,
            online: 1,
          }
        }) || []
    } else {
      ElMessage.error(res.message)
    }
  })
}

watch(
  () => dateSelect.value,
  (val) => {
    if (val) {
      getDetectorInfoData()
    }
  },
)

const entities = ref([])
const deviceChange = (val, data) => {
  console.log(val, data.name)
  if (data.name == '视频监控') {
    if (val) {
      alarmPoint.value.forEach((item) => {
        const entity = _viewer.entities.add({
          id: item.id,
          properties: new Cesium.PropertyBag(item),
          position: Cesium.Cartesian3.fromDegrees(...item.position),
          billboard: {
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            image: item.img,
            scale: 0.4,
          },
        })
        data.entities.push(entity)
      })
    } else {
      if (data.entities?.length) {
        data.entities.forEach((e) => {
          _viewer.entities.remove(e)
        })
      }
      data.entities = []
    }
  }
}

const getDeviceList = () => {
  const params = {
    parkId: props.activePark,
  }
  getEquipmentTotal(params).then((res) => {
    const info = res.data
    deviceList.value = deviceType.value.map((item) => {
      return {
        img: item.img,
        name: item.name,
        total: info[item.value],
      }
    })
  })
}

onMounted(async () => {
  dateValue.value = new Date()
  const { map, layerManager } = await getHelper(mapId)
  _viewer = map
  measure = new Cesium.Measure(map)
  _layerManager = layerManager
  getDeviceList()
  getDetectorInfoData()
  getDeviceTableData()
})
onBeforeUnmount(() => {
  deviceList.value.forEach((item) => {
    if (item.entities?.length) {
      item.entities.forEach((e) => {
        _viewer.entities.remove(e)
      })
    }
    item.entities = []
  })
})
</script>

<template>
  <div :class="['left', isExpanded ? 'active' : '']">
    <card name="巡检统计" class="inspection-info">
      <template #title>
        <i class="title-icon"></i>
      </template>

      <template #right>
        <div class="title-right">
          <!--          <el-date-picker v-model="dateValue" type="date" :size="'small'" />-->
          <!--          <img src="../../../../assets/imgs/ic_rq.png" />-->
        </div>
      </template>
      <div class="area-title">
        <div class="area-title-left" style="justify-content: flex-start">
          <div class="area-title-left-names">
            <div
              class="area-title-left-name"
              :class="dateSelect == '0' ? 'is-active' : ''"
              @click="dateSelect = '0'"
            >
              日检查
            </div>
            <div
              class="area-title-left-name"
              :class="dateSelect == '1' ? 'is-active' : ''"
              @click="dateSelect = '1'"
            >
              周检查
            </div>
            <div
              class="area-title-left-name"
              :class="dateSelect == '2' ? 'is-active' : ''"
              @click="dateSelect = '2'"
            >
              月检查
            </div>
            <div
              class="area-title-left-name"
              :class="dateSelect == '3' ? 'is-active' : ''"
              @click="dateSelect = '3'"
            >
              专项任务
            </div>
          </div>
        </div>
      </div>
      <div class="inspection-info">
        <div class="inspection-info-title">
          <img src="../../../../assets/imgs/ic_rwmc.png" />
          <span>任务类型：{{ detectorInfo.type }}</span>
        </div>
        <div class="inspection-info-line common-hidden">
          <span>任务名称：</span>
          <el-tooltip :content="detectorInfo.name" placement="top">
            <span>{{ detectorInfo.name }}</span>
          </el-tooltip>
        </div>
        <div class="inspection-info-line common-hidden">
          <span>巡检时间：</span>
          <el-tooltip :content="detectorInfo.name" placement="top">
            <span>{{ detectorInfo.time }}</span>
          </el-tooltip>
        </div>
        <div class="inspection-info-line common-hidden">
          <span>任务状态：</span>
          <span style="color: #50fea3">{{ detectorInfo.status }}</span>
        </div>
        <!--        <div class="inspection-info-line">-->
        <!--          <span>检查点数量：</span>-->
        <!--          <span-->
        <!--            >45(-->
        <!--            <span style="color: #36d5f0">正常35 </span>-->
        <!--            <span style="color: #ff6059">异常10 </span>-->
        <!--            <span>未检0</span>-->
        <!--            )</span-->
        <!--          >-->
        <!--        </div>-->
        <!--        <div class="inspection-info-line">-->
        <!--          <span>每天频率：</span>-->
        <!--          <span style="color: #fab54f">执行两次</span>-->
        <!--        </div>-->
      </div>
    </card>
    <div class="bottom-change">
      <div class="tabs">
        <img src="../../../../assets/imgs/bt_z_af.png" @click="tabValue = 1" />
        <span>{{ tabValue }}/2</span>
        <img src="../../../../assets/imgs/bt_y_af.png" @click="tabValue = 2" />
      </div>
    </div>
    <card v-if="tabValue == 1" name="设备统计" class="device-statistics">
      <template #title>
        <i class="title-icon"></i>
      </template>
      <div class="area-title">
        <div class="area-title-left" style="justify-content: flex-start">
          <!-- <div class="area-title-left-names">
            <div
              class="area-title-left-name"
              :class="deviceSelect == '0' ? 'is-active' : ''"
              @click="deviceSelect = '0'"
            >
              按场景类型
            </div>
            <div
              class="area-title-left-name"
              :class="deviceSelect == '1' ? 'is-active' : ''"
              @click="deviceSelect = '1'"
            >
              按设备类型
            </div>
          </div> -->
        </div>
      </div>
      <div class="device-statistics-list">
        <el-scrollbar>
          <div
            class="device-statistics-list-item"
            v-for="(item, index) in deviceList"
            :key="index"
          >
            <div class="device-statistics-list-item-left">
              <img :src="item.img" />
            </div>
            <div class="device-statistics-list-item-right">
              <div class="device-statistics-list-item-right-name">
                <span class="name">{{ item.name }}</span>
                <!-- <el-checkbox
                  v-model="item.check"
                  size="small"
                  @change="
                    (val) => {
                      deviceChange(val, item)
                    }
                  "
                /> -->
                <!-- <span
                  >总数：<span style="color: #32dcfb">{{
                    item.total
                  }}</span></span
                > -->
                <div class="total">
                  总数：
                  <div style="color: #32dcfb">{{ item.total }}</div>
                </div>
              </div>
              <div class="device-statistics-list-item-right-count">
                <!-- <span
                  >在线：<span style="color: #32dcfb">{{
                    item.online
                  }}</span></span
                >
                <span
                  >离线：<span style="color: #798f9a">{{
                    item.offline
                  }}</span></span
                > -->
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </card>
    <card v-if="tabValue == 2" name="设备列表" class="device-list">
      <template #title>
        <i class="title-icon"></i>
      </template>
      <div class="device-table">
        <el-table class="device-table-table" :data="deviceTable" height="100%">
          <el-table-column prop="name" label="设备名称" align="center" />
          <el-table-column prop="type" label="设备类型" align="center" />
          <el-table-column
            align="center"
            label="设备型号"
            prop="model"
            show-overflow-tooltip
          />
          <el-table-column prop="online" label="设备状态" align="center">
            <template #default="scope">
              <span v-if="scope.row.online == 1" style="color: #50fea3"
                >在线</span
              >
              <span v-else style="color: #ff6059">离线</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.left {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .area-title {
    display: flex;
    height: 21px;
    position: relative;

    &-left {
      height: 100%;
      width: 345px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('@/assets/imgs/tab_yq_d.png');
      margin-left: 10px;
      display: flex;
      justify-content: space-around;
      padding-left: 20px;

      &-names {
        width: 300px;
        display: flex;
        justify-content: space-around;
      }

      &-name {
        font-family: Source Han Sans SC;
        font-weight: bold;
        font-size: 16px;
        color: #00a6ff;
        background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        cursor: pointer;
      }

      .is-active {
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
        background: linear-gradient(259deg, #fff4c8 0%, #ffc152 98.9990234375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .inspection-info {
    height: 346px;

    .title-icon {
      width: 122px;
      background-image: url('@/assets/imgs/xjjl_title.png');
    }

    .title-right {
      height: 100%;
      position: absolute;
      right: 0;
      display: flex;
      align-items: center;
      font-family: Source Han Sans SC;
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;

      img {
        height: 14px;
        width: 14px;
        margin-right: 4px;
      }

      :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
        width: 100px;
      }

      :deep(.el-date-editor) {
        .el-input__prefix {
          display: none;
        }

        .el-input__wrapper {
          background-color: transparent;
          box-shadow: none;
          padding: 0;

          .el-input__inner {
            font-family: Source Han Sans SC;
            font-weight: 500;
            font-size: 14px;
            color: #ffffff;
          }
        }
      }
    }

    .inspection-info {
      height: calc(100% - 40px);
      margin-top: 11px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('@/assets/imgs/inspection_info_bg.png');
      padding: 5px;

      &-title {
        height: 32px;
        width: 100%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url('@/assets/imgs/bg_rwmc.png');
        display: flex;
        align-items: center;
        padding-left: 4px;

        img {
          height: 20px;
          width: 20px;
          margin-right: 4px;
        }

        span {
          font-family: Source Han Sans SC;
          font-weight: bold;
          font-size: 16px;
          color: #ffffff;
          background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      &-line {
        font-family: Source Han Sans SC;
        font-weight: 400;
        font-size: 16px;
        color: #c4eaff;
        line-height: 40px;
        height: 40px;
        padding-left: 8px;

        &.common-hidden {
          text-overflow: ellipsis;
          word-break: break-all;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
  }

  .bottom-change {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 20px;

    .tabs {
      width: 102px;
      height: 24px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('@/assets/imgs/biaoqian.png');
      display: flex;
      align-items: center;
      justify-content: space-between;

      img {
        width: 24px;
        height: 16px;
        cursor: pointer;
      }

      span {
        flex: 1;
        font-family: Source Han Sans SC;
        font-weight: 400;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
      }
    }
  }

  .device-statistics {
    height: 588px;

    .title-icon {
      width: 122px;
      background-image: url('@/assets/imgs/sbtj_title.png');
    }

    &-list {
      height: calc(100% - 20px);
      overflow: hidden;
      &-item {
        height: 100px;
        display: flex;
        align-items: center;

        &-left {
          img {
            width: 78px;
            height: 89px;
          }
        }

        &-right {
          flex: 1;
          padding-left: 10px;
          overflow: hidden;

          &-name {
            margin-top: 10px;
            height: 44px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-image: url('@/assets/imgs/title_d.png');
            display: flex;
            align-items: center;
            justify-content: space-between;

            span {
              font-family: Source Han Sans SC;
              font-weight: bold;
              font-size: 16px;
              color: #d1d6df;
              line-height: 32px;
              font-style: italic;
              background: linear-gradient(0deg, #acddff 0%, #ffffff 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              margin-right: 10px;
            }

            .total {
              font-weight: 400;
              font-size: 14px;
              color: #cedce6;
              font-style: normal;
              display: flex;
              align-items: center;
            }

            :deep(.el-checkbox) {
              .el-checkbox__inner {
                background-color: rgba(11, 36, 70, 0.65);
                border: 1px solid #2889ff;
              }
            }
          }

          &-count {
            width: 80%;
            margin-top: 20px;
            font-weight: 400;
            font-size: 14px;
            color: #cedce6;
            display: flex;
            justify-content: flex-end;
          }
        }
      }
    }
  }

  .device-list {
    height: 588px;

    .title-icon {
      width: 122px;
      background-image: url('@/assets/imgs/sblb_title.png');
    }

    .device-table {
      height: 95%;

      :deep(.el-table) {
        background-color: transparent;
        color: #fff;

        tr {
          background-color: transparent;
        }

        th.el-table__cell {
          background-color: transparent;
          font-family: Source Han Sans SC;
          font-weight: 500;
          font-size: 14px;
          color: #c4eaff;
        }

        tbody tr:hover > td {
          background-color: transparent !important;
        }

        .el-table__cell {
          border-bottom: none;
        }

        .el-table__inner-wrapper::before {
          height: 0px;
        }

        .el-table__header-wrapper {
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-image: url('@/assets/imgs/list_top_sblb.png');
        }

        .el-table__body-wrapper {
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-image: url('@/assets/imgs/list_bottom_sblb.png');
          padding-bottom: 10px;

          .el-table__cell {
            border-bottom: 1px solid rgba($color: #657ca8, $alpha: 0.6);
          }
        }
      }
    }
  }
}
</style>
